<template>
  <div id="top">
    <div class="w">
      <ul class="top-ul-l">
        <li id="top-location-btn" name="display">
          <a href="">
            <i class="icon-top-location icon-map-marker">. </i>
            <span class="span-top-location">北京</span>
          </a>
          <div id="top-location-btn-box" name="display-box">
            <div class="item-box1">
              <div v-for="item in list" :key="item.id">
                <a href="#;"> {{ item.v }}</a>
              </div>
            </div>

            <div class="top-br"></div>
            <div class="item-box2">
              <h2>地区专项版本</h2>
              <a href="">中国港澳</a>
              <a href="">中国台湾</a>
              <a href="">京东全球</a>
            </div>
            <div class="top-br"></div>
            <div class="item-box2">
              <h2>Available Sites</h2>
              <a href=""><i class="top-icon icon1"></i>Global Site</a>
              <a href=""><i class="top-icon icon2"></i>Сайт России</a>
              <a href=""><i class="top-icon icon3"></i>Situs Indonesia</a>
              <a href=""><i class="top-icon icon4"></i>Sitio de España</a>
              <a href=""><i class="top-icon icon5"></i>เว็บไซต์ประเทศไทย</a>
            </div>
          </div>
        </li>
      </ul>
      <ul class="top-ul-r">
        <li class="DL-1" id="DL-1" v-if="user" name="display">
          <a href="javascript:;" v-to="{ name: 'personal-data' }"
            >{{ user.username }} <span class="plus"></span><i class="icon-angle-down"></i>
          </a>
          <div id="DL-1-box" name="display-box">
            <div class="item-t">
              <div class="img-box" v-to="{ name: 'personal-data' }">
                <img :src="portrait" alt="" />
              </div>
              <div class="item-r">
                <span class="plus"></span>
                <a class="TD" href="javascript:;" @click="outLogin">退出登录</a>
                <a
                  href="https://plus.jd.com/index?flow_system=appicon&amp;flow_entrance=appicon1&amp;flow_channel=pc"
                  class="p"
                  >开通PLUS 平均省1210元/年&gt;</a
                >
              </div>
            </div>
          </div>
        </li>
        <li class="DL-1" v-else>
          <router-link :to="{ name: 'login' }">你好，请登录</router-link>&nbsp;&nbsp;
          <router-link :to="{ name: 'enroll' }" class="red">免费注册</router-link>
        </li>
        <li class="g"></li>
        <li><a href="//order.jd.com/center/list.action">我的订单</a></li>
        <li class="g"></li>
        <li id="top-wdjd-btn" name="display">
          <a href="">我的京东<i class="icon-angle-down"></i></a>
          <div id="top-wdjd-btn-box" name="display-box">
            <div class="item-box1">
              <div><a href="">待处理订单</a></div>
              <div><a href="">返修退换货</a></div>
              <div><a href="">降价商品</a></div>
              <div><a href="">我的问答</a></div>
              <div><a href="">我的关注</a></div>
            </div>
            <div class="top-br"></div>
            <div class="item-box2">
              <div><a href="">我的京豆</a></div>
              <div><a href="">我的白条</a></div>
              <div><a href="">我的优惠券</a></div>
              <div><a href="">我的理财</a></div>
            </div>
          </div>
        </li>
        <li class="g"></li>
        <li><a href="">京东会员</a></li>
        <li class="g"></li>
        <li id="top-qecg-btn" name="display">
          <a href="" class="red">企业采购<i class="icon-angle-down"></i></a>
          <div id="top-qecg-btn-box" name="display-box">
            <div>
              <a href="">企业购</a>
            </div>
            <div class="width">
              <a href="">商用场景馆</a>
            </div>
            <div>
              <a href="">工业品</a>
            </div>
            <div class="width">
              <a href="">丰客多商城</a>
            </div>
            <div>
              <a href="">礼品卡</a>
            </div>
            <div class="width">
              <a href="">微信企业购</a>
            </div>
            <div>
              <a href="">工品优选</a>
            </div>
            <div class="width">
              <a href="">京东锦礼</a>
            </div>
            <div class="bottom">
              <a href="">大中型企业采购</a>
            </div>
          </div>
        </li>
        <li class="g"></li>
        <li id="top-khfw-btn" name="display">
          <a>客户服务<i class="icon-angle-down"></i></a>
          <div id="top-khfw-btn-box" name="display-box">
            <h2>客户</h2>
            <div class="item-box1">
              <div><a href="">帮助中心</a></div>
              <div><a href="">售后服务</a></div>
              <div><a href="">在线客服</a></div>
              <div><a href="">意见建议</a></div>
              <div><a href="">电话客服</a></div>
              <div><a href="">客服邮箱</a></div>
              <div><a href="">金融咨询</a></div>
              <div><a href="">全球售后客服</a></div>
              <div><a href="">企业客服</a></div>
            </div>
            <div class="top-br"></div>
            <h2>商户</h2>
            <div class="item-box2">
              <div><a href="">合作招商</a></div>
              <div><a href="">成长中心</a></div>
              <div><a href="">商家后台</a></div>
              <div><a href="">京麦工作站</a></div>
              <div><a href="">商家帮助</a></div>
              <div><a href="">规划平台</a></div>
            </div>
          </div>
        </li>

        <li class="g"></li>
        <li id="top-wzdh-btn" name="display">
          <a>网站导航<i class="icon-angle-down"></i></a>
          <div id="top-wzdh-btn-box" class="w" name="display-box">
            <div class="item-box1">
              <h2>特色主题</h2>
              <div><a href="javascript:;">新品首发</a></div>
              <div><a href="javascript:;">京东金融</a></div>
              <div><a href="javascript:;">全球售</a></div>
              <div><a href="javascript:;">国际站</a></div>
              <div><a href="javascript:;">京东会员</a></div>
              <div><a href="javascript:;">台湾售</a></div>
              <div><a href="javascript:;">俄语站</a></div>
              <div><a href="javascript:;">装机大师</a></div>
              <div><a href="javascript:;">港澳售</a></div>
              <div><a href="javascript:;">优惠券</a></div>
              <div><a href="javascript:;">秒杀</a></div>
              <div><a href="javascript:;">闪购</a></div>
              <div><a href="javascript:;">印尼站</a></div>
              <div><a href="javascript:;">陪伴计划</a></div>
              <div><a href="javascript:;">出海招商</a></div>
              <div><a href="javascript:;">拍拍二手</a></div>
              <div><a href="javascript:;">买什么</a></div>
            </div>
            <div class="item-box2">
              <h2>行业频道</h2>
              <div><a href="javascript:;">手机</a></div>
              <div><a href="javascript:;">智能数码</a></div>
              <div><a href="javascript:;">玩3C</a></div>
              <div><a href="javascript:;">电脑办公</a></div>
              <div><a href="javascript:;">家用电器</a></div>
              <div><a href="javascript:;">京鱼座智能</a></div>
              <div><a href="javascript:;">京东服饰</a></div>
              <div><a href="javascript:;">京东生鲜</a></div>
              <div><a href="javascript:;">家装城</a></div>
              <div><a href="javascript:;">母婴</a></div>
              <div><a href="javascript:;">食品</a></div>
              <div><a href="javascript:;">农资频道</a></div>
              <div><a href="javascript:;">整车</a></div>
              <div><a href="javascript:;">图书</a></div>
              <div><a href="javascript:;">劳动防护</a></div>
            </div>
            <div class="item-box3">
              <h2>生活服务</h2>
              <div><a href="javascript:;">京东众筹</a></div>
              <div><a href="javascript:;">白条</a></div>
              <div><a href="javascript:;">京东金融App</a></div>
              <div><a href="javascript:;">京东小金库</a></div>
              <div><a href="javascript:;">理财</a></div>
              <div><a href="javascript:;">话费</a></div>
              <div><a href="javascript:;">水电煤</a></div>
              <div><a href="javascript:;">彩票</a></div>
              <div><a href="javascript:;">旅行</a></div>
              <div><a href="javascript:;">机票酒店</a></div>
              <div><a href="javascript:;">电影票</a></div>
              <div><a href="javascript:;">京东到家</a></div>
              <div><a href="javascript:;">游戏</a></div>
              <div><a href="javascript:;">拍拍回收</a></div>
            </div>
            <div class="item-box4">
              <h2>更多精选</h2>
              <div><a href="javascript:;">合作招商</a></div>
              <div><a href="javascript:;">京东通信</a></div>
              <div><a href="javascript:;">京东E卡</a></div>
              <div><a href="javascript:;">企业采购</a></div>
              <div><a href="javascript:;">服务市场</a></div>
              <div><a href="javascript:;">办公生活馆</a></div>
              <div><a href="javascript:;">校园加盟</a></div>
              <div><a href="javascript:;">京东社区</a></div>
              <div><a href="javascript:;">游戏社区</a></div>
              <div><a href="javascript:;">知识产权维权</a></div>
            </div>
          </div>
        </li>
        <li class="g"></li>
        <li id="top-sjjd-btn">
          <a>手机京东</a>
          <div id="top-sjjd-btn-box">
            <i class="icon-caret-up"></i>
            <div>
              <div class="img-box">
                <img
                  src="https://img12.360buyimg.com/img/jfs/t1/67481/15/565/28110/5cec9234E71c47244/dc4cf353fd96922e.png.webp"
                  alt=""
                />
              </div>
              <div>
                <h2>手机京东</h2>
                <span>新人专享大礼包</span>
                <div class="img-icon-box">
                  <a href=""></a>
                  <a href=""></a>
                  <a href=""></a>
                </div>
              </div>
            </div>
            <div>
              <div class="img-box">
                <img
                  src="https://img10.360buyimg.com/img/jfs/t1/133427/32/6189/44062/5f2a5467Efff804d1/7cbc252ed5993190.png.webp"
                  alt=""
                />
              </div>
              <div>
                <h2>关注京东</h2>
                <h2>JD.COM</h2>
                <span>新人专享大礼包</span>
              </div>
            </div>
            <div>
              <div class="img-box">
                <img
                  src="https://img14.360buyimg.com/img/jfs/t1/36947/5/10895/15408/5cec924bE6c038530/5cf21582b416c186.jpg.webp"
                  alt=""
                />
              </div>
              <div>
                <h2>京东金融客户端</h2>
                <span>新人专享大礼包</span>
                <div class="img-icon-box">
                  <a href=""></a>
                  <a href=""></a>
                </div>
              </div>
            </div>
            <div>
              <div class="img-box">
                <img
                  src="https://img13.360buyimg.com/img/jfs/t1/93019/8/17752/28300/5e8c23b8E4c6c7c13/9c45c518ad785873.png.webp"
                  alt=""
                />
              </div>
              <div>
                <h2>京东健康客户端</h2>
                <div class="img-icon-box">
                  <a href=""></a>
                  <a href=""></a>
                </div>
              </div>
            </div>
            <div>
              <div class="img-box">
                <img
                  src="https://img12.360buyimg.com/img/jfs/t1/170279/40/10824/19657/6045bf7dE610d6258/3e925badd90757a3.jpg.webp"
                  alt=""
                />
              </div>
              <div>
                <h2>关注京东小程序</h2>
                <span>新人0.1元购</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'HomeHead',
  data() {
    return {
      /** 城市数据列表*/
      list: [
        { id: 1, v: '北京' },
        { id: 2, v: '上海' },
        { id: 3, v: '天津' },
        { id: 4, v: '重庆' },
        { id: 5, v: '河北' },
        { id: 6, v: '山西' },
        { id: 7, v: '河南' },
        { id: 8, v: '辽宁' },
        { id: 9, v: '吉林' },
        { id: 10, v: '黑龙江' },
        { id: 11, v: '内蒙古' },
        { id: 12, v: '江苏' },
        { id: 13, v: '山东' },
        { id: 14, v: '安徽' },
        { id: 15, v: '浙江' },
        { id: 16, v: '福建' },
        { id: 17, v: '湖北' },
        { id: 18, v: '湖南' },
        { id: 19, v: '广东' },
        { id: 20, v: '广西' },
        { id: 21, v: '江西' },
        { id: 22, v: '四川' },
        { id: 23, v: '海南' },
        { id: 24, v: '贵州' },
        { id: 25, v: '云南' },
        { id: 26, v: '西藏' },
        { id: 27, v: '陕西' },
        { id: 28, v: '甘肃' },
        { id: 29, v: '青海' },
        { id: 30, v: '宁夏' },
        { id: 31, v: '新疆' },
        { id: 32, v: '港澳' },
        { id: 33, v: '台湾' },
        { id: 34, v: '钓鱼岛' },
        { id: 35, v: '海外' },
      ],
    }
  },
  computed: {
    ...mapState('user', ['user']),
    ...mapGetters('user', ['portrait']),
  },
  methods: {
    outLogin() {
      this.$store.commit('user/outLogin')
    },
  },
  created() {
    this.$store.dispatch('user/sendMe')
  },
}
</script>

<style lang="scss" scoped>
#top {
  height: 31px;
  background-color: #e3e4e5;
}

#top .top-ul-r .plus {
  vertical-align: middle;
  display: inline-block;
  width: 38px;
  height: 16px;
  border-radius: 2px;
  background-image: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/3d73dc978ab585b3dea58d9128d974c3.png);
  background-position: 47px -21px;
}
.top-ul-l {
  float: left;
  width: 58px;
}

.top-ul-l li {
  position: relative;
  z-index: 10;
  height: 100%;
  display: block;
  text-align: center;
  box-sizing: border-box;
}

#top [name='display'] > a {
  position: relative;
  z-index: 20;
  background: rgba(0, 0, 0, 0);
  border: rgba(0, 0, 0, 0) solid 1px;
  border-bottom: 0;
}

#top [name='display']:hover > a {
  background: #fff;
  border-top: #ccc solid 1px;
  border-left: #ccc solid 1px;
  border-right: #ccc solid 1px;
  border-bottom: 0;
}

[name='display-box'] {
  z-index: 15;
  position: absolute;
  display: none;
  top: 30px;
  background: #fff;
  border: #ccc 1px solid;
  box-shadow: 1px 2px 1px rgb(0 0 0 / 10%);
}

#top [name='display']:hover [name='display-box'],
#top-sjjd-btn:hover #top-sjjd-btn-box {
  display: block;
}

.top-br {
  border-bottom: #eee dotted 1px;
  margin: 6px auto;
}

/* 定位图标 */
.icon-top-location {
  font-size: 14px;
  display: inline-block;
  width: 14px;
  height: 16px;
}

#top ul li {
  float: left;
}

#top a {
  font-size: 12px;
  color: #999;
}

#body a[href]:hover {
  color: #e33333;
}

#top ul {
  height: 100%;
}

.top-ul-l li > a {
  position: relative;
  z-index: 1;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: auto;
  padding: 0 7px;
  border: #e3e4e5 solid 1px;
  border-bottom: 0px;
}

#top-location-btn-box {
  width: 300px;
  height: 442px;
  padding: 10px;
}

#top-location-btn-box .item-box1 {
  width: 100%;
  height: 206px;
}

#top-location-btn-box .item-box1 div {
  line-height: 24px;
  float: left;
  width: 60px;
  height: auto;
  padding: 2px 0;
}

#top-location-btn-box .item-box1 div a {
  height: 24px;
  line-height: 24px;
  padding: 5px 10px;
  transition-property: all;
}

#top-location-btn-box .item-box1 div:hover a {
  background: #f4f4f4;
  color: #e33333;
  transition-duration: 0.2s;
}

#top-location-btn-box .item-box1 div.select a {
  color: #fff;
  background: #e33333;
}

#top-location-btn-box .top-br {
  width: 92%;
}

#top-location-btn-box .item-box2 {
  text-align: left;
  padding-left: 10px;
}

#top-location-btn-box .item-box2 h2 {
  margin: 0;
  margin-left: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  padding: 5px 0;
  font-weight: inherit;
  color: #999;
}

#top-location-btn-box .item-box2 a {
  display: inline-block;
  margin-left: 8px;
  padding: 5px 0;
  width: 130px;
}

#top-location-btn-box .item-box2 .top-icon {
  display: inline-block;
  margin-right: 6px;
  width: 17px;
  height: 12px;
  background-image: url();
  background-size: 300%;
  background-repeat: no-repeat;
}

#top-location-btn-box .item-box2 .icon1 {
  background-position: -5% -5%;
}

#top-location-btn-box .item-box2 .icon2 {
  background-position: 52% -5%;
}

#top-location-btn-box .item-box2 .icon3 {
  background-position: -5% 105%;
}

#top-location-btn-box .item-box2 .icon4 {
  background-position: 105% -5%;
}

#top-location-btn-box .item-box2 .icon5 {
  background-position: 52% 10%;
}

.top-ul-r {
  float: right;
  line-height: 30px;
}

.top-ul-r a {
  color: #999;
  height: 100%;
  padding: 0 5px;
  display: inline-block;
}

.top-ul-r .g {
  padding: 0;
  display: block;
  background-color: #ccc;
  width: 1px;
  height: 10px;
  margin: 10px 5px;
}

.top-ul-r i {
  color: #999;
  margin-left: 5px;
  font-size: 8px;
}

#top-wdjd-btn-box {
  width: 282px;
  height: 155px;
  padding: 10px;
}

#top .top-ul-r .top-br {
  width: 100%;
}

#top-wdjd-btn-box > div > div {
  float: left;
  width: 46%;
  height: 24px;
}

#top-wdjd-btn-box .item-box1 {
  height: 80px;
}

#top-wdjd-btn-box a {
  height: 24px;
}

#top-qecg-btn-box {
  width: 137px;
  height: 122px;
  padding: 10px;
}

#top-qecg-btn-box div {
  line-height: 24px;
  width: 43%;
  height: 24px;
  float: left;
}

#top-qecg-btn-box .width {
  width: 53%;
}

#top-qecg-btn-box .bottom {
  width: 90%;
}

#top-khfw-btn {
  position: relative;
}

#top-khfw-btn-box {
  width: 168px;
  height: 263px;
  padding: 10px;
  right: 0;
}

#top-khfw-btn-box h2 {
  margin: 0;
  margin-left: 6px;
  font-size: 12px;
  padding: 5px 0;
  line-height: 16px;
  color: #666;
}

#top-khfw-btn-box > div > div {
  width: 49%;
  float: left;
  height: 24px;
  line-height: 24px;
}

#top-khfw-btn-box .item-box1 {
  height: 124px;
}

#top-wzdh-btn-box {
  box-sizing: border-box;
  height: 181px;
  padding: 15px 0;
  left: 0;
}

#top-wzdh-btn-box h2 {
  margin: 0;
  margin-left: 6px;
  font-size: 12px;
  padding: 5px 0;
  line-height: 16px;
  color: #666;
}

#top-wzdh-btn-box > div > div {
  width: 85px;
  float: left;
  height: 24px;
  line-height: 24px;
}

#top-wzdh-btn-box > div {
  float: left;
  width: 255px;
  border-left: #eee solid 1px;
  padding-left: 18px;
}

#top-wzdh-btn-box .item-box1 {
  width: 340px;
  border: 0;
}

#top-sjjd-btn-box {
  font-size: 12px;
  position: absolute;
  right: 0;
  z-index: 15;
  display: none;
  top: 30px;
  background: #fff;
  border: #ccc 1px solid;
  box-shadow: 1px 2px 1px rgb(0 0 0 / 10%);
  width: 190px;
  height: 535px;
}

#top-sjjd-btn-box > div {
  height: 76px;
  padding: 15px 5px;
  border-bottom: #eee solid 1px;
}

#top-sjjd-btn-box > div > div {
  float: left;
}

#top-sjjd-btn-box .img-box {
  margin-right: 5px;
  width: 76px;
  height: 76px;
  padding: 2px;
  box-sizing: border-box;
  border: #ccc solid 1px;
}

#top-sjjd-btn-box h2 {
  font-size: inherit;
  color: #666;
  line-height: 17px;
}

#top-sjjd-btn-box span {
  line-height: 14px;
  color: #e33333;
  font-size: inherit;
}

#top-sjjd-btn-box .img-icon-box a {
  width: 25px;
  height: 25px;
  padding: 0;
  background-image: url(//misc.360buyimg.com/mtd/pc/index/home/images/sprite_mobile@1x.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#top-sjjd-btn-box .img-icon-box a:nth-child(1) {
  background-position: 0 0%;
}

#top-sjjd-btn-box .img-icon-box a:nth-child(2) {
  background-position: 0 50%;
}

#top-sjjd-btn-box .img-icon-box a:nth-child(3) {
  background-position: 0 100%;
}

#top-sjjd-btn-box .icon-caret-up {
  font-size: 14px;
  line-height: 14px;
  color: #fff;
  position: absolute;
  left: 154px;
  top: -10px;
}
#DL-1 a {
  text-align: right;
  display: block;
  width: 135px;
  padding-right: 10px;
}

#DL-1 .item-t .img-box {
  width: 60px;
  height: 60px;
  margin: 10px 0 10px 15px;
  float: left;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

#DL-1-box {
  width: 272px;
  color: #999;
}

#DL-1-box .item-t {
  overflow: hidden;
  width: 100%;
  height: 84px;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
}

#DL-1-box .item-r a {
  height: auto;
}

#DL-1-box .item-r .p {
  width: 170px;
  margin-top: 10px;
  font-size: 12px;
}

#DL-1-box .item-r {
  float: left;
  padding-left: 10px;
}

.carousel-DL-box {
  width: 210px;
  height: 79px;
  margin: 0 auto;
  padding-top: 10px;
  font-size: 12px;
}

.carousel-DL-box a {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  text-align: center !important;
}

#DL-1-box .TD {
  position: absolute;
  top: 10px;
  right: 5px;
}

#DL-1-box .item-r .plus {
  display: inline-block;
  width: 51px;
  height: 16px;
  background-position: 0 37px;
}

#DL-1-box .item-b {
  position: relative;
  width: 100%;
  height: 99px;
}

#DL-1 button {
  position: absolute;
  height: 80px;
  width: 15px;
  top: 0;
  background: rgba(0, 0, 0, 0);
}

.carousel-DL-prev {
  left: 0;
}

.carousel-DL-next {
  right: 0;
}

.carousel-DL-box .swiper-slide {
  width: 70px;
}

.carousel-DL-box .img-box {
  width: 55px;
  height: 55px;
  margin: 0 auto;
  background-image: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/040d97771298d4d454439b83c73799a3.png);
}

.carousel-DL-box .swiper-slide:nth-child(1) .img-box {
  background-position: -177px -59px;
}

.carousel-DL-box .swiper-slide:nth-child(2) .img-box {
  background-position: 0 -59px;
}

.carousel-DL-box .swiper-slide:nth-child(3) .img-box {
  background-position: 0 -118px;
}

.carousel-DL-box .swiper-slide:nth-child(4) .img-box {
  background-position: -177px 0;
}

.carousel-DL-box .swiper-slide:nth-child(5) .img-box {
  background-position: -177px -118px;
}

.carousel-DL-box .swiper-slide:nth-child(6) .img-box {
  background-position: -59px -177px;
}

.carousel-DL-box .swiper-slide:nth-child(7) .img-box {
  background-position: -177px -177px;
}

.carousel-DL-box .swiper-slide:nth-child(8) .img-box {
  background-position: -118px -59px;
}

#DL-1-box button i {
  margin: 0;
}
</style>
